<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理表搜索</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        body {
            background-color: #f8f9fa;
            padding: 20px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .container {
            max-width: 1200px;
        }
        .search-box {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        .user-table {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .table th {
            background-color: #f1f5f9;
            border-bottom: 2px solid #dee2e6;
            font-weight: 600;
        }
        .status-active {
            color: #198754;
            font-weight: bold;
        }
        .status-inactive {
            color: #dc3545;
            font-weight: bold;
        }
        .search-input {
            border-radius: 5px;
            padding: 10px 15px;
        }
        .search-btn {
            border-radius: 5px;
            padding: 10px 20px;
            font-weight: 600;
        }
        .no-results {
            text-align: center;
            padding: 40px;
            color: #6c757d;
        }
        .search-type-btn {
            border-radius: 20px;
            margin: 0 5px;
        }
        .date-input-group {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            margin-top: 15px;
        }
        .active-search {
            background-color: #0d6efd;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center mb-4">用户管理表</h1>
        
        <!-- 搜索框 -->
        <div class="search-box">
            <div class="row mb-3">
                <div class="col-md-12 text-center">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-outline-primary search-type-btn active-search" id="usernameSearchBtn">
                            <i class="bi bi-person me-1"></i>按用户名搜索
                        </button>
                        <button type="button" class="btn btn-outline-primary search-type-btn" id="dateSearchBtn">
                            <i class="bi bi-calendar me-1"></i>按创建时间搜索
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 用户名搜索 -->
            <div class="row" id="usernameSearchSection">
                <div class="col-md-8 mx-auto">
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-search"></i></span>
                        <input type="text" 
                               class="form-control search-input" 
                               id="usernameInput" 
                               placeholder="输入用户名进行搜索...">
                        <button class="btn btn-primary search-btn" onclick="performSearch()">
                            搜索
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 日期搜索 -->
            <div class="row" id="dateSearchSection" style="display: none;">
                <div class="col-md-8 mx-auto">
                    <div class="date-input-group">
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-calendar"></i></span>
                            <input type="date" 
                                   class="form-control search-input" 
                                   id="dateInput">
                            <button class="btn btn-primary search-btn" onclick="performSearch()">
                                搜索
                            </button>
                        </div>
                        <div class="mt-2 text-center">
                            <small class="text-muted">选择创建日期进行搜索</small>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 快速日期筛选 -->
            <div class="row mt-3" id="quickDateFilters" style="display: none;">
                <div class="col-md-8 mx-auto text-center">
                    <small class="text-muted me-2">快速筛选:</small>
                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="setDateFilter('today')">今天</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="setDateFilter('week')">本周</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="setDateFilter('month')">本月</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="setDateFilter('clear')">清除</button>
                </div>
            </div>
        </div>

        <!-- 用户表格 -->
        <div class="user-table">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>年龄</th>
                        <th>职业</th>
                        <th>创建时间</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody id="userTableBody">
                    {% for user in users %}
                    <tr>
                        <td>{{ user.id }}</td>
                        <td>{{ user.username }}</td>
                        <td>{{ user.age }}</td>
                        <td>{{ user.occupation }}</td>
                        <td>{{ user.created_at }}</td>
                        <td>
                            {% if user.status == '活跃' %}
                                <span class="status-active">● {{ user.status }}</span>
                            {% else %}
                                <span class="status-inactive">● {{ user.status }}</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            <div id="noResults" class="no-results" style="display: none;">
                <i class="bi bi-search" style="font-size: 2rem;"></i>
                <h5 class="mt-2">没有找到匹配的用户</h5>
                <p class="text-muted">尝试调整搜索条件</p>
            </div>
        </div>

        <!-- 结果统计 -->
        <div class="mt-3 text-muted" id="resultCount">
            共 {{ users|length }} 个用户
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 当前搜索类型
        let currentSearchType = 'username';
        
        // 切换搜索类型
        document.getElementById('usernameSearchBtn').addEventListener('click', function() {
            switchSearchType('username');
        });
        
        document.getElementById('dateSearchBtn').addEventListener('click', function() {
            switchSearchType('date');
        });
        
        function switchSearchType(type) {
            currentSearchType = type;
            
            // 更新按钮状态
            document.getElementById('usernameSearchBtn').classList.remove('active-search');
            document.getElementById('dateSearchBtn').classList.remove('active-search');
            
            // 显示/隐藏搜索区域
            if (type === 'username') {
                document.getElementById('usernameSearchSection').style.display = 'block';
                document.getElementById('dateSearchSection').style.display = 'none';
                document.getElementById('quickDateFilters').style.display = 'none';
                document.getElementById('usernameSearchBtn').classList.add('active-search');
            } else {
                document.getElementById('usernameSearchSection').style.display = 'none';
                document.getElementById('dateSearchSection').style.display = 'block';
                document.getElementById('quickDateFilters').style.display = 'block';
                document.getElementById('dateSearchBtn').classList.add('active-search');
            }
            
            // 清空输入并显示所有用户
            document.getElementById('usernameInput').value = '';
            document.getElementById('dateInput').value = '';
            performSearch();
        }
        
        // 搜索功能
        function performSearch() {
            let url = '/search?';
            
            if (currentSearchType === 'username') {
                const usernameQuery = document.getElementById('usernameInput').value.trim();
                if (usernameQuery) {
                    url += `username=${encodeURIComponent(usernameQuery)}`;
                }
            } else {
                const dateQuery = document.getElementById('dateInput').value;
                if (dateQuery) {
                    url += `date=${encodeURIComponent(dateQuery)}`;
                }
            }
            
            // 显示加载状态
            const tableBody = document.getElementById('userTableBody');
            tableBody.innerHTML = '<tr><td colspan="6" class="text-center py-4"><div class="spinner-border text-primary" role="status"></div><div class="mt-2">搜索中...</div></td></tr>';
            
            fetch(url)
                .then(response => response.json())
                .then(data => {
                    updateTable(data.users);
                    updateResultCount(data.count);
                })
                .catch(error => {
                    console.error('搜索出错:', error);
                    tableBody.innerHTML = '<tr><td colspan="6" class="text-center text-danger py-4">搜索出错，请重试</td></tr>';
                });
        }
        
        // 快速日期筛选
        function setDateFilter(type) {
            const dateInput = document.getElementById('dateInput');
            const today = new Date();
            
            switch(type) {
                case 'today':
                    dateInput.value = today.toISOString().split('T')[0];
                    break;
                case 'week':
                    const weekAgo = new Date(today);
                    weekAgo.setDate(today.getDate() - 7);
                    dateInput.value = weekAgo.toISOString().split('T')[0];
                    break;
                case 'month':
                    const monthAgo = new Date(today);
                    monthAgo.setMonth(today.getMonth() - 1);
                    dateInput.value = monthAgo.toISOString().split('T')[0];
                    break;
                case 'clear':
                    dateInput.value = '';
                    break;
            }
            
            if (type !== 'clear') {
                performSearch();
            }
        }
        
        // 更新表格数据
        function updateTable(users) {
            const tableBody = document.getElementById('userTableBody');
            const noResults = document.getElementById('noResults');
            
            if (users.length === 0) {
                tableBody.innerHTML = '';
                noResults.style.display = 'block';
                return;
            }
            
            noResults.style.display = 'none';
            
            let html = '';
            users.forEach(user => {
                const statusClass = user.status === '活跃' ? 'status-active' : 'status-inactive';
                
                html += `
                    <tr>
                        <td>${user.id}</td>
                        <td>${user.username}</td>
                        <td>${user.age}</td>
                        <td>${user.occupation}</td>
                        <td>${user.created_at}</td>
                        <td><span class="${statusClass}">● ${user.status}</span></td>
                    </tr>
                `;
            });
            
            tableBody.innerHTML = html;
        }
        
        // 更新结果统计
        function updateResultCount(count) {
            const resultCount = document.getElementById('resultCount');
            const usernameQuery = document.getElementById('usernameInput').value.trim();
            const dateQuery = document.getElementById('dateInput').value;
            
            if (currentSearchType === 'username' && usernameQuery) {
                resultCount.textContent = `找到 ${count} 个匹配"${usernameQuery}"的用户`;
            } else if (currentSearchType === 'date' && dateQuery) {
                resultCount.textContent = `找到 ${count} 个在 ${dateQuery} 创建的用户`;
            } else {
                resultCount.textContent = `共 ${count} 个用户`;
            }
        }
        
        // 回车键搜索
        document.getElementById('usernameInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                performSearch();
            }
        });
        
        document.getElementById('dateInput').addEventListener('change', function() {
            if (currentSearchType === 'date') {
                performSearch();
            }
        });
        
        // 清空搜索时显示所有用户
        document.getElementById('usernameInput').addEventListener('input', function() {
            if (this.value.trim() === '' && currentSearchType === 'username') {
                performSearch();
            }
        });
    </script>
</body>
</html>